import React from 'react';
import {Button, InputItem} from 'antd-mobile';
import Icon from '@components/icon';
import {fetch} from '@utils/Fetch';
import md5 from 'md5';
import './login.less';

class Login extends React.Component {
  state = {
    userName: '',
    password: ''
  };
  fSubmit = () => {
    const {userName, password} = this.state;
    const {history} = this.props;
    fetch('/api/user/login').post({userName, password: md5(password)})
      .success(() => history.replace('/'));
  };
  fChange = (state) => {
    this.setState(state);
  };

  render() {
    const {userName, password} = this.state;
    return (
      <div className='login'>
        <InputItem placeholder='用户名'
                   value={userName}
                   labelNumber={2}
                   clear
                   onChange={v => this.fChange({userName: v})}
        ><Icon type='center' /></InputItem>
        <InputItem type='password'
                   value={password}
                   placeholder='密码'
                   labelNumber={2}
                   clear
                   onChange={v => this.fChange({password: v})}
        ><Icon type='password' /></InputItem>
        <Button type='warning'
                disabled={!password}
                onClick={this.fSubmit}
        >登录</Button>
      </div>
    )
  }
}

export default Login;
